<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色添加</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addrole.css">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
</head>
<body>
<div class="pageall">
    <div class="titleall">
        <div class="titleph">
            <img src="${pageContext.request.contextPath}/static/images/role.png" style="width:100%;height:100%;"/>
        </div>
        <div class="titleword">角色管理 >>> 角色添加</div>
    </div>
    <div class="createinfo"><div>新增</div></div>
    <div class="roleph2">
        <img src="${pageContext.request.contextPath}/static/images/addrole.png" style="width:100%;height:100%"/>
    </div>
    <div class="contentall">
        <form method="post" id="addpowerall">
        <div class="rolenameadd">角色名称：</div>
        <input type="text" class="rolenamebox" name="character_name" id="charactername" placeholder="角色名称 / Name"/>
            <div class="roleph">
            <img src="${pageContext.request.contextPath}/static/images/rolename.png" style="width:100%;height:100%"/>
            </div>
        <div class="powerword">功能权限</div>
            <div class="roleph1">
                <img src="${pageContext.request.contextPath}/static/images/function.png" style="width:100%;height:100%"/>
            </div>
            <table class="roletable">
                <tr class="rolerow">
                     <td><input type="checkbox" id="checkall"/> 全选</td>
                     <td>增加（权限+）</td>
                     <td>删除（权限+）</td>
                     <td>查询（权限+）</td>
                     <td>修改（权限+）</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="admincheckall"/> 全选（管理员管理）</td>
                    <td><input type="checkbox" value="增加管理员" name="power_name" class="admincheck" onclick="adminch(this,0)"/> 增加管理员</td>
                    <td><input type="checkbox" value="删除管理员" name="power_name" class="admincheck" onclick="adminch(this,1)"/> 删除管理员</td>
                    <td><input type="checkbox" value="查询管理员" name="power_name" class="admincheck" onclick="adminch(this,2)"/> 查询管理员</td>
                    <td><input type="checkbox" value="修改管理员" name="power_name" class="admincheck" onclick="adminch(this,3)"/> 修改管理员</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="rolecheckall"/> 全选（角色管理）</td>
                    <td><input type="checkbox" value="增加角色" name="power_name" class="rolecheck"/> 增加角色</td>
                    <td><input type="checkbox" value="删除角色" name="power_name" class="rolecheck"/> 删除角色</td>
                    <td><input type="checkbox" value="查询角色" name="power_name" class="rolecheck"/> 查询角色</td>
                    <td><input type="checkbox" value="修改角色" name="power_name" class="rolecheck"/> 修改角色</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="buyercheckall"/> 全选（业主管理）</td>
                    <td><input type="checkbox" value="增加业主" name="power_name" class="buyercheck"/> 增加业主</td>
                    <td>无</td>
                    <td><input type="checkbox" value="查询业主" name="power_name" class="buyercheck"/> 查询业主</td>
                    <td><input type="checkbox" value="修改业主" name="power_name" class="buyercheck"/> 修改业主</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="usercheckall"/> 全选（用户管理）</td>
                    <td>无</td>
                    <td>无</td>
                    <td><input type="checkbox" value="查询用户" name="power_name" class="usercheck"/> 查询用户</td>
                    <td><input type="checkbox" value="修改用户" name="power_name" class="usercheck"/> 修改用户</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="noticecheckall"/> 全选（公告管理）</td>
                    <td><input type="checkbox" value="增加公告" name="power_name" class="noticecheck"/> 增加公告</td>
                    <td><input type="checkbox" value="隐藏公告" name="power_name" class="noticecheck"/> 隐藏公告</td>
                    <td><input type="checkbox" value="查询公告" name="power_name" class="noticecheck"/> 查询公告</td>
                    <td><input type="checkbox" value="修改公告" name="power_name" class="noticecheck"/> 修改公告</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="viewcheckall"/> 全选（轮播图管理）</td>
                    <td><input type="checkbox" value="增加轮播图" name="power_name" class="viewcheck"/> 增加轮播图</td>
                    <td><input type="checkbox" value="隐藏轮播图" name="power_name" class="viewcheck"/> 隐藏轮播图</td>
                    <td><input type="checkbox" value="查询轮播图" name="power_name" class="viewcheck"/> 查询轮播图</td>
                    <td><input type="checkbox" value="修改轮播图" name="power_name" class="viewcheck"/> 修改轮播图</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="visitorcheckall"/> 全选（访客管理）</td>
                    <td><input type="checkbox" value="增加访客" name="power_name" class="visitorcheck"/> 增加访客</td>
                    <td>无</td>
                    <td><input type="checkbox" value="查询访客" name="power_name" class="visitorcheck"/> 查询访客</td>
                    <td><input type="checkbox" value="修改访客" name="power_name" class="visitorcheck"/> 修改访客</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="infocheckall"/> 全选（意见反馈管理）</td>
                    <td>无</td>
                    <td>无</td>
                    <td><input type="checkbox" value="查询意见" name="power_name" class="infocheck"/> 查询意见</td>
                    <td><input type="checkbox" value="修改意见" name="power_name" class="infocheck"/> 修改意见</td>
                </tr>
                <tr class="rolerow1">
                    <td style="color:#444;"><input type="checkbox" class="repaircheckall"/> 全选（报修管理）</td>
                    <td><input type="checkbox" value="增加报修记录" name="power_name" class="repaircheck"/> 增加报修记录</td>
                    <td><input type="checkbox" value="删除报修记录" name="power_name" class="repaircheck"/> 删除报修记录</td>
                    <td><input type="checkbox" value="查询报修记录" name="power_name" class="repaircheck"/> 查询报修记录</td>
                    <td><input type="checkbox" value="修改报修记录" name="power_name" class="repaircheck"/> 修改报修记录</td>
                </tr>
            </table>
            <input type="submit" value="确定" class="submitpower"/>
        </form>
    </div>
    <div class="tishiall">
        <div class="tishibox">
            <div class="tishiph1"><img src="${pageContext.request.contextPath}/static/images/cg.png" style="width:100%;height:100%;"/></div>
            <div class="sucword">角色创建成功！</div>
            <form method="post" action="flush1.do">
            <input type="submit" class="queding" value="确定"></input>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var w=$(window).width();
    var h=$(window).height();
    $(".pageall").innerWidth(w+"px");
    $(".pageall").innerHeight(h+"px");
    $(".contentall").innerWidth(w+"px");
    $("#checkall").click(function(){
        $(".admincheckall").prop("checked",$("#checkall").prop("checked"));
        $(".admincheck").prop("checked",$("#checkall").prop("checked"));
        $(".rolecheckall").prop("checked",$("#checkall").prop("checked"));
        $(".rolecheck").prop("checked",$("#checkall").prop("checked"));
        $(".buyercheckall").prop("checked",$("#checkall").prop("checked"));
        $(".buyercheck").prop("checked",$("#checkall").prop("checked"));
        $(".usercheckall").prop("checked",$("#checkall").prop("checked"));
        $(".usercheck").prop("checked",$("#checkall").prop("checked"));
        $(".noticecheckall").prop("checked",$("#checkall").prop("checked"));
        $(".noticecheck").prop("checked",$("#checkall").prop("checked"));
        $(".repaircheckall").prop("checked",$("#checkall").prop("checked"));
        $(".repaircheck").prop("checked",$("#checkall").prop("checked"));
        $(".noticecheckall").prop("checked",$("#checkall").prop("checked"));
        $(".noticecheck").prop("checked",$("#checkall").prop("checked"));
        $(".viewcheckall").prop("checked",$("#checkall").prop("checked"));
        $(".viewcheck").prop("checked",$("#checkall").prop("checked"));
        $(".infocheckall").prop("checked",$("#checkall").prop("checked"));
        $(".infocheck").prop("checked",$("#checkall").prop("checked"));
        $(".visitorcheckall").prop("checked",$("#checkall").prop("checked"));
        $(".visitorcheck").prop("checked",$("#checkall").prop("checked"));
    });
    $(".admincheckall").click(function(){
        $(".admincheck").prop("checked",$(".admincheckall").prop("checked"));
    });
    $(".rolecheckall").click(function(){
        $(".rolecheck").prop("checked",$(".rolecheckall").prop("checked"));
    });
    $(".buyercheckall").click(function(){
        $(".buyercheck").prop("checked",$(".buyercheckall").prop("checked"));
    });
    $(".usercheckall").click(function(){
        $(".usercheck").prop("checked",$(".usercheckall").prop("checked"));
    });
    $(".infocheckall").click(function(){
        $(".infocheck").prop("checked",$(".infocheckall").prop("checked"));
    });
    $(".visitorcheckall").click(function(){
        $(".visitorcheck").prop("checked",$(".visitorcheckall").prop("checked"));
    });
    $(".repaircheckall").click(function(){
        $(".repaircheck").prop("checked",$(".repaircheckall").prop("checked"));
    });
    $(".viewcheckall").click(function(){
        $(".viewcheck").prop("checked",$(".viewcheckall").prop("checked"));
    });
    $(".noticecheckall").click(function(){
        $(".noticecheck").prop("checked",$(".noticecheckall").prop("checked"));
    });

    $.validator.addMethod("wordstyle",function(value,element,params){
        var num1=/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
        if(params=="true"){
            return num1.test(value);
        }
    },"输入的角色名称只能由文字、数字、英文以及下划线组成,且不能以下划线开头和结尾！");
    $.validator.addMethod("checkcode",function(value,element){
        var pattern = new RegExp("[`~!@#$^&*()=|{} ':;,.<>/?~！@#￥……&*（）——|【】‘：”“'。？%+ 　\"\\\\]");
        var specialStr = "";
        for(var i=0;i<value.length;i++){
            specialStr += value.substr(i, 1).replace(pattern, '');
        }
        if( specialStr == value){
            return true;
        }
        return false;
    },"禁止输入特殊字符");
    $("#addpowerall").validate({
        rules: {
            character_name: {
                required: true,
                remote:"${pageContext.request.contextPath}/jugerepeat.do",
                rangelength:[2,10],
                wordstyle:"true",
                checkcode:true
            }
        },
        messages: {
            character_name: {
                required: "*角色名称为必填项！",
                remote:"该角色名称已经被使用！",
                rangelength:"角色名称长度为2~10位字符！",
                checkcode:"请检查无效字符"
            }
        },
        submitHandler: function(form) {
            var param = $("#addpowerall").serializeArray();
            $.ajax({
                type:'POST',
                url:"${pageContext.request.contextPath}/addcharacter.do",
                data:param,
                dataType:"json",
                success:function(data){
                    if(data==true||data==false){
                        $(".tishiall").css("display","block");
                    }
                }
            });
        }
    });
    $("#charactername").focus(function(){
        $("#charactername").css("border","1px solid #333");
    });
    $("#charactername").focusout(function(){
        $("#charactername").css("border","1px solid #999");
    });
</script>
</html>